<template>
    <div class="totalScore">
        <div class="con">
            <van-nav-bar :border="false" title="总积分" left-arrow @click-left="onClickLeft" />
            <div class="top">
                <div class="tit">截止到目前的总积分数</div>
                <div class="score">{{ userInfo.hasscore }}</div>
            </div>
            <img class="image" src="../../../assets/my/image.png" />
            <div class="list">
                <div class="title">总积分明细</div>
                
                <van-empty description="暂无数据" style="height: 100%;" v-if="flowingList.length == 0" />
                <div class="listItem" v-for="item in flowingList" :key="item.id">
                    <div class="left">
                        <span>{{ item.change_type }}</span>
                        <span>{{ item.record_type == 0 ? '消费了' : '返回了' }}{{ item.money }}</span>
                    </div>
                    <div class="right">
                        <span>{{ item.record_type === 0 ? '-' : '+' }}{{ item.money }}</span>
                        <span>{{ item.createtime }}</span>
                    </div>    
                </div>
            
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
// import { useStore } from 'vuex';
import { ref, onMounted, reactive } from 'vue';
import { Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import QRCode from '../../../components/QRCode.vue';
import { flowing, myTeam } from '../../../api/index';
let formData = new FormData();
const active = ref(0);
const router = useRouter();
// 定义onClickLeft方法
const onClickLeft = () => history.back();

const userInfo = JSON.parse(window.localStorage.getItem("userInfo") as string)

//  累计充值积分
const page_size = ref('')
const moneytype = ref('')
const flowingList = ref<any>([])
const total = ref(0)
const flowList = () => {
    let formData = new FormData();
    formData.append("type", (page_size.value, moneytype.value))
    flowing(formData).then((res: any) => {
        // console.log(res.data.list.total);
        if (res.code == 1) {
            flowingList.value = res.data.list.data;
            total.value = res.data.list.total
        } else {
            Toast(res.msg);
        }
    });
};


onMounted(() => {
    // console.log(store.getters.getUserInfo); // 直接访问 route.params
    formData.append("page_size", "15");
    formData.append("type", "1");
    formData.append("date", ``);

    formData = new FormData();
    flowList()
});
</script>

<style lang="less" scoped>
.totalScore {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;
    background-image: url(../../../assets/my/mytembkg.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 345px;
}

.con {
    .van-nav-bar {
        height: 52px;
        background: none;
        color: #FFFFFF;
        content: none;
    }

    padding: 34px 20px 0;

    .top {
        height: 97px;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 11px;
        position: relative;

        .score {
            font-size: 30px;
            color: #3D3D3D;
        }
    }

    .image {
        position: absolute;
        right: 32px;
        width: 97px;
        height: 128px;
        top: 83px;
    }

    .list {
        margin-top: 27px;
        height: 430px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;

        .title {
            font-size: 18px;
            color: #3D3D3D;
            text-align: left;
            padding: 25px 15px;
        }

        .listItem {
            margin: 16px 15px 0;
            height: 80px;
            background: #FFFFFF;
            border-radius: 13px 13px 13px 13px;
            display: flex;
            justify-content: space-between;
            padding: 18px 16px;
            box-sizing: border-box;

            .left,
            .right {
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                text-align: left;

                span {
                    &:nth-child(1) {
                        font-size: 16px;
                        color: #232323;
                    }

                    &:nth-child(2) {
                        font-size: 13px;
                        color: #999999;
                    }
                }
            }

            .right {
                text-align: right;
            }
        }
    }

}



:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #FFFFFF;

}

:deep(.van-nav-bar__left) {
    padding: 0;
}

:deep(.van-nav-bar__content .van-nav-bar__title) {
    color: #FFFFFF;
}
</style>